<template>
    <van-list loading-text="正在加载电影数据...." finished-text="我是有底线的" v-model:loading="isLoading"
        :finished="queryParams.pageIndex >= movieListData.pageCount" @load="loadNextPage">
        <div class=" h-[110px] flex p-[5px]" v-for="(item)  in movieListData.listData" :key="item.id" @click="toMovieDetail(item.id)">
            <div class="w-[90px] h-full bg-red-500 ">
                <img :src="baseURL + item.movie_pc" class="w-full h-full" alt=""
                    @click="ImagePreview([baseURL + item.movie_pc])">
            </div>
            <ul class=" flex-1 overflow-auto tex-[12px] text-gray-600 flex flex-col justify-between p-[5px]">
                <li class="text-[16px] font-bold text-black">{{ item.movie_name }}</li>
                <li>观众评<span class=" text-warningColor font-bold text-[14px]">{{ item.movie_score }}</span></li>
                <li class="truncate">主演：{{ item.role }}</li>
                <li>{{ item.publicTime }}上映</li>
            </ul>
            <div class=" w-[70px] flex justify-center items-center">
                <button type="button" class="btn-buy" v-if="item.publicTime < new Date().toLocaleDateString()">
                    购票
                </button>
                <button type="button" class="btn-presale" v-else>预售</button>
            </div>
        </div>
    </van-list>
</template>
<script setup>
import { reactive, ref } from "vue";
import API from "../utils/API/index.js";
import { ImagePreview } from "vant";
import { useRouter } from "vue-router";

//获取路由管理对象
const router = useRouter();
   //push是推入一个新的页面
const toMovieDetail=(id) => {
          router.push({
            name:"movieDetail",
            //向新页面传参，新页面路径上会看到该参数的和值
            query:{
                id:id,
            },
            })
          
};

let isLoading = ref(false)
const baseURL = ref("http://www.softeem.xin:9999");
const queryParams = reactive({
    pageIndex: 1,
    tags: "",
    movie_name: ""
});
const movieListData = reactive({
    listData: [],
    pageCount: 0
})
API.movieInfo.getListByPage(queryParams).then(result => {
    //返回拦截器返回的数据
    // console.log(result)
    movieListData.listData = result.listData;
    movieListData.pageCount = result.pageCount;
}).catch(error => {
    console.log(error);
})

//加载下一页的方法
const loadNextPage = () => {
    //第一步：先把当前页码+1
    queryParams.pageIndex++;
    //第二步：重新请求数据
    isLoading.value = true;
    API.movieInfo.getListByPage(queryParams)
        .then(result => {
            //这里不一样，要保留原来的代码，追加新的数据
            movieListData.listData = movieListData.listData.concat(result.listData);
            movieListData.pageCount = result.pageCount;
        })
        .finally(() => {
            isLoading.value = false;
        });

}

</script>
<style scoped lang="scss">
.btn-buy {
    @apply w-[50px] h-[25px] text-[12px] bg-primaryColor border-none rounded-[12px] text-white
}

.btn-presale {
    @extend .btn-buy;
    @apply bg-secondColor;
}
</style>